<template>
    <div class="content">
        <el-row class="hpx-title-border enterprise_info">
            <span class="title_text">企业信息</span>
            <span class="col"><span class="hpx-label">企业名称：</span>{{enterpriseName | hideStr}}</span>
            <span class="col"><span class="hpx-label">历史交易成功率：</span>{{tradeCount}}</span>
            <span class="col"><span class="hpx-label">平均背书时长：</span>{{endorsement.minute}}分{{endorsement.second}}秒</span>
            <span class="top_btn" @click="go_back"><i class="iconfont icon-fanhui"></i> 返回上一页</span>
        </el-row>
        <el-row class="filter_btn">
            <el-col :span="16">
                <el-col :span="3" class="title hpx-label">
                    库存票列表
                </el-col>
                <el-radio-group v-model="billStatus" size="medium" @change="changeStatus">
                    <el-radio-button v-for="item in billOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                </el-radio-group>
            </el-col>
        </el-row>
        <Table :tableData='tableData' @change="changePage" @changes="changeSize">
            <template slot-scope="{scope}">
                <el-button type="text" v-if="scope.row.bill_status_code == 800"  @click="$router.push(`/buyer/stockBill/${$route.params.id}/${scope.row.bill_id}`)">详情</el-button>
                <!--  @click="$router.push(`/buyer/stockBill/${$route.params.id}/${scope.row.bill_id}`)" -->
                <el-button type="primary"
                    size="small"
                    v-if="scope.row.bill_status_code == 801"
                    @click="toBidding(scope.row)">
                    我要买
                </el-button>
                <span v-if="scope.row.bill_status_code >= 804 && scope.row.bill_status_code < 810">交易中</span>
                <span v-if="scope.row.bill_status_code >= 810" size="small">交易完成</span>
            </template>
        </Table>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop, Emit} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'
    import moment from 'moment'
    import { ellipsis } from '@/util/format'
    @Component({
        components:{
            Table
        }
    })
    export default class StockBill extends Vue {
        enterpriseName = ''
        tradeInfo:any = {}
        endorsement:any = {}
        billStatus:string = '10'
        billOptions = [{
                label: '全部票据',
                key: ''
            },{
                label: '未发布',
                key: '-10'
            },{
                label: '已发布',
                key: '10'
        }]
        tableData:TableData = {
            header: [
                {
                    label: '发布时间',
                    key: 'bill_product_create_time',
                    formatter: (row:any) => moment(row.bill_product_create_time).format('MM-DD HH:mm')
                },{
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => ellipsis(row.acceptor_name,'...',10)
                },{
                    label: '票面金额',
                    key: 'bill_sum_price'
                },{
                    label: '到期时间',
                    key: 'bill_deadline_time',
                    formatter: (row:any) => moment(row.bill_deadline_time).format('YYYY-MM-DD')
                },{
                    label: '背书瑕疵',
                    key: 'bill_flaw_names',
                    formatter: (row:any) => row.bill_flaw_names ? row.bill_flaw_names.join(',') : ''
                },{
                    label: '每十万扣',
                    key: 'every_plus_amount',
                    formatter: (row:any) => row.every_plus_amount ? row.every_plus_amount : '--'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
        
    //methods
        //查询企业交易成功率
        async getTradeCount () {
            let res = await this.$http.get(`customers/enterpriseOrderCount/${this.$route.params.id}`)
            if(res.status == 200){
                if(res.data){
                    this.tradeInfo = res.data
                }
            }
        }
        //计算企业交易成功率
        get tradeCount () {
            if (this.tradeInfo.real_deal_order_num == 0) {
                return '首单'
            }else{
                return parseInt(this.tradeInfo.finish_order_num/this.tradeInfo.real_deal_order_num*100)+'%'
            }
        }
        //查询企业平均背书时长
        async getendorsementTime () {
            let params = {
                enterpriseId: this.$route.params.id
            }
            let res = await this.$http.get('customers/customer/endorsementTime',{params})
            if(res.status == 200 && res.data){
                this.endorsement = res.data
            }
        }
        
        //切换类型
        changeStatus () {
            this.getBillList()
        }
        //获取库存票列表
        async getBillList () {
            let id = this.$route.params.id
            let params = {
                bill_status: this.billStatus,
                enterprise_id: id,
                n: this.tableData.footer.pageSize,
                p: this.tableData.footer.currentPage,
                orderBy: '-create_time'
            }
            let res = await this.$http.get('bills/bill/stock',{params})
            if(res.status == 200){
                this.enterpriseName = res.data.drawer_enterprise_name
                this.tableData.body = res.data.listName
                this.tableData.footer.total = res.data.page_info.items_per_page
                this.tableData.footer.currentPage = res.data.page_info.current_page
            }
        }
        
        //竞价
        toBidding (row) {
            window.location.href = `trade.html#/buyer/myBidding/detail/${row.bill_product_id}`
        }
        go_back () {
            history.back(-1)
        }
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getBillList()
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getBillList()  
        }
        mounted () {
            this.getBillList()
            this.getTradeCount()
            this.getendorsementTime()
        }
    }
</script>

<style lang="scss" scoped>
    .el-container{
        min-height: 100%;
    }
    .el-main{
        min-height: -moz-calc(100% - (90px + 224px));
        min-height: -webkit-calc(100% - (90px + 224px));
        min-height: calc(100% - (90px + 224px));
    }
    .content{
        // width: 84%;
        // margin: 20px auto;
    }
    .enterprise_info{
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: $__color-show;
        .title_text{
            margin-left: 10px;
        }
        .col{
            margin-left: 50px;
        }
        .top_btn{
            float: right;
            margin-right: 40px;
            color: $__color-link;
            cursor: pointer;
        }
    }
    .filter_btn{
        padding-top: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid $__color-line;
        .title{
            height: 36px;
            line-height: 36px;
            font-size: 18px;
            margin-right: 12px;
        }
    }
</style>
